<template>
	<div :style="'width:'+width+'px;height:'+height+'px;'">
		<div class="top-menu theme top-menu-hover" :style="'width:'+width+'px;line-height:'+height+'px;'" @click="menuclick" @mouseenter="hover=1" @mouseleave="hover=0">
			<i v-if="iconPosition=='before'" class="iconfont iconbefore" :class="iconname"></i>
			<slot></slot>
			<i v-if="iconPosition=='after'" class="iconfont iconafter" :class="iconname"></i>
		</div>
		<div class="top-menu-items" :class="{'top-menu-items-hover': hover == 1,'top-menu-items-nohover': hover == 0}" @mouseenter="hover=1" @mouseleave="hover=0">
			<div v-for="(item,index) in Array.from(menuitems)" @click="itemclick(item)" class="top-menu-item theme top-menu-itemhover" :style="'width:'+itemWidth+'px;text-align:'+textalign+';'">{{item.name}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "topMemu",
		props: {
			width: {
				default: 100
			},
			itemWidth: {
				default: 100
			},
			textalign:{default:'center'},
			height: {
				default: 70
			},
			iconPosition: null,
			iconname: null,
			menuitems: null,			
		},
		components: {

		},
		data() {
			return {
				hover: -1
			}
		},
		computed: {

		},
		methods: {
			menuclick() {
				this.$emit('menuclick');
			},
			itemclick(item) {
				this.hover = 0;
				this.$emit('itemclick', item);
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.top-menu {
		color: #606266;
		font-size: 14px;
	}	
	.top-menu-items {
		color: #606266;
		font-size: 14px;
		height: 0;
		position: fixed;
		overflow: hidden;
		background: red;
		z-index: 99;
	}
	
	.top-menu-items-hover {
		height: auto;
		transition: all .3s;
	}
	
	.top-menu-items-nohover {
		height: 0;
		transition: all .3s;
	}
	
	.top-menu-item {
		line-height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		cursor: pointer;		
		padding: 0 15px;
	}
	.iconbefore{
		margin-right: 5px;
	}
	.iconafter{
		margin-left: 5px;
	}
</style>